<template>
  <div class="page flex-col justify-between">
    <div class="section_1 flex-col">
      <div class="nav-bar_1 flex-row">
        <div class="icon_1 flex-col"></div>
        <span class="text_1">登录遇到问题？</span>
      </div>
      <div class="box_1 flex-col justify-between">
        <div class="box_2 flex-row justify-between">
          <div class="box_3 flex-col"></div>
          <span class="text_2">易言，让沟通更简单</span>
        </div>
        <div class="image-text_1 flex-row justify-between">
          <span class="text-group_1">登录发现更多精彩</span>
          <div class="box_4 flex-col"></div>
        </div>
      </div>
      <div class="box_5 flex-row justify-between">
        <span class="text_3">+86</span>
        <div class="group_1 flex-col"></div>
        <span class="text_4">输入手机号</span>
      </div>
      <div class="box_6 flex-row justify-between">
        <div class="checkbox_1 flex-col"></div>
        <div class="text-wrapper_1">
          <span class="text_5">已阅读并同意</span> <span class="text_6"></span> <span class="text_7">用户协议</span>
          <span class="text_8">和</span> <span class="text_9"></span> <span class="text_10">隐私政策</span>
        </div>
      </div>
      <button class="button_1 flex-col">
        <div class="text-wrapper_2 flex-col">
          <span class="text_11">发送验证码</span>
        </div>
      </button>
      <div class="text-wrapper_3 flex-row justify-between">
        <span class="text_12">邮箱登录</span>
        <span class="text_13">密码登录</span>
      </div>
      <span class="text_14">其他登录方式</span>
      <div class="icon_2 flex-col"></div>
    </div>
    <div class="section_2 flex-col"></div>
  </div>
</template>

<script setup lang="ts">
  import { useRoute, useRouter } from 'vue-router';
  import { useCustomerStore } from '/@/store';
  // import { setLocal } from '@/common/js/utils';
  const constants = reactive({});
  const verifyRef = ref(null);
  const state = reactive({
    username: '',
    password: '',
    username1: '',
    password1: '',
    type: 'login',
    imgCode: '',
    verify: '',
  });
  // 切换登录和注册两种模式
  const toggle = (v: string) => {
    state.type = v;
    state.verify = '';
  };

  // // 提交登录或注册表单
  const onSubmit = async (values) => {
    console.log('verifyRef.value.imgCode', verifyRef.value.imgCode);
    state.imgCode = verifyRef.value.imgCode || '';
    if (state.verify.toLowerCase() != state.imgCode.toLowerCase()) {
      Toast.fail('验证码有误');
      return;
    }
    if (state.type == 'login') {
      const { data } = await login({
        loginName: values.username,
        passwordMd5: md5(values.password),
      });
      setLocal('token', data);
      // 需要刷新页面，否则 axios.js 文件里的 token 不会被重置
      window.location.href = '/';
    } else {
      await register({
        loginName: values.username1,
        password: values.password1,
      });
      Toast.success('注册成功');
      state.type = 'login';
      state.verify = '';
    }
  };
</script>

<style lang="less" scoped>
  .page {
    background-color: rgba(255, 255, 255, 1);
    position: relative;
    width: 375px;
    height: 812px;
    overflow: hidden;
  }

  .section_1 {
    width: 375px;
    height: 779px;
  }

  .nav-bar_1 {
    width: 374px;
    height: 43px;
    margin: 34px 0 0 1px;
  }

  .icon_1 {
    width: 18px;
    height: 18px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/FigmaDDSSlicePNGa81e85caff2ef6e58eab6ec9840284a0.png) 100% no-repeat;
    background-size: 100% 100%;
    margin: 13px 0 0 19px;
  }

  .text_1 {
    width: 98px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-family: PingFang SC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    margin: 12px 20px 0 219px;
  }

  .box_1 {
    width: 290px;
    height: 69px;
    margin: 46px 0 0 30px;
  }

  .box_2 {
    width: 290px;
    height: 39px;
  }

  .box_3 {
    width: 32px;
    height: 32px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/FigmaDDSSlicePNG02e73c6469e6eab943ef86d934584e51.png) 100% no-repeat;
    background-size: 100% 100%;
    margin-top: 4px;
  }

  .text_2 {
    width: 252px;
    height: 39px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.8);
    font-size: 28px;
    font-family: PingFang SC-Semibold;
    text-align: left;
    white-space: nowrap;
    line-height: 28px;
  }

  .image-text_1 {
    width: 146px;
    height: 20px;
    margin-top: 10px;
  }

  .text-group_1 {
    width: 122px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    letter-spacing: 10px;
    font-family: PingFang SC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
  }

  .box_4 {
    width: 20px;
    height: 20px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/FigmaDDSSlicePNGb85cf3b7da22888ae43c213d34f2b8ce.png) 100% no-repeat;
    background-size: 100% 100%;
  }

  .box_5 {
    width: 136px;
    height: 21px;
    margin: 57px 0 0 30px;
  }

  .text_3 {
    width: 28px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.8);
    font-size: 15px;
    font-family: PingFang SC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 15px;
  }

  .group_1 {
    width: 7px;
    height: 5px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/FigmaDDSSlicePNG34f4f358ed420ae095563bc3a448eefa.png) -7px -4px no-repeat;
    background-size: 8px 5px;
    margin: 13px 0 0 13px;
  }

  .text_4 {
    width: 75px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.4);
    font-size: 15px;
    font-family: PingFang SC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 15px;
    margin-left: 13px;
  }

  .box_6 {
    width: 223px;
    height: 18px;
    margin: 32px 0 0 30px;
  }

  .checkbox_1 {
    width: 11px;
    height: 11px;
    border: 1px solid rgba(0, 0, 0, 0.4000000059604645);
    margin-top: 3px;
  }

  .text-wrapper_1 {
    width: 208px;
    height: 18px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: PingFang SC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
  }

  .text_5 {
    width: 208px;
    height: 18px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.4);
    font-size: 13px;
    font-family: PingFang SC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
  }

  .text_6 {
    width: 208px;
    height: 18px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 13px;
    font-family: PingFang SC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
  }

  .text_7 {
    width: 208px;
    height: 18px;
    overflow-wrap: break-word;
    color: rgba(160, 61, 220, 1);
    font-size: 13px;
    font-family: PingFang SC-Regular;
    text-decoration: underline;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
  }

  .text_8 {
    width: 208px;
    height: 18px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.4);
    font-size: 13px;
    font-family: PingFang SC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
  }

  .text_9 {
    width: 208px;
    height: 18px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 1);
    font-size: 13px;
    font-family: PingFang SC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
  }

  .text_10 {
    width: 208px;
    height: 18px;
    overflow-wrap: break-word;
    color: rgba(160, 61, 220, 1);
    font-size: 13px;
    font-family: PingFang SC-Regular;
    text-decoration: underline;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
  }

  .button_1 {
    height: 50px;
    width: 315px;
    margin: 16px 0 0 30px;
  }

  .text-wrapper_2 {
    background-color: rgba(160, 61, 220, 0.4);
    border-radius: 13px;
    height: 50px;
    width: 315px;
  }

  .text_11 {
    width: 80px;
    height: 22px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-family: PingFang SC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 14px 0 0 118px;
  }

  .text-wrapper_3 {
    width: 315px;
    height: 20px;
    margin: 24px 0 0 30px;
  }

  .text_12 {
    width: 56px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-family: PingFang SC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
  }

  .text_13 {
    width: 56px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
    font-family: PingFang SC-Medium;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
  }

  .text_14 {
    width: 78px;
    height: 18px;
    overflow-wrap: break-word;
    color: rgba(0, 0, 0, 0.3);
    font-size: 13px;
    font-family: PingFang SC-Regular;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
    margin: 264px 0 0 149px;
  }

  .icon_2 {
    width: 40px;
    height: 40px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/FigmaDDSSlicePNGe067326d2984695dda039c821027939b.png) 100% no-repeat;
    background-size: 100% 100%;
    margin: 16px 0 11px 168px;
  }

  .section_2 {
    width: 375px;
    height: 34px;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/FigmaDDSSlicePNG8d9facd770388c33e75eea5ae853054c.png) 100% no-repeat;
    background-size: 100% 100%;
    margin-top: -1px;
  }
</style>
